<template>
  <div class="home">
   <div class="MaIn">
 
      <div class="container">
    <el-container>
           
      <el-container>
          <Sidebar :Switch='isCollapse'></Sidebar>
        <el-main style="padding:0;">
           <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
          <el-header class="Header" style="padding:0;  height: 70px;">
            <div class="Header-nav-top">
              <div class="Header-nav-let">
                <i :class="type" @click="swh"></i>
                <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '*' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/">活动管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
              </el-breadcrumb>

              </div>
              <div class="Header-nav-right">
                <div class="search-box">
                  <i class="el-icon-search Heraer-Show" @click="SearchShow"></i>
                  <transition name="slide-fade">
                    <el-input
                      @blur="LoseFocus"
                      v-show="showSearch"
                      class="search-input Heraer-Show"
                      placeholder="请输入内容"
                      v-model="input"
                      clearable
                    ></el-input>
                  </transition>
                  <svg
                    t="1589949887043"
                    class="amplification Heraer-Show"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2487"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M38.518154 338.944c-19.219692 0-38.360615-12.839385-38.360616-38.360615V95.940923c0-38.360615 19.140923-63.960615 51.2-83.101538 19.140923-6.380308 31.901538-6.380308 38.281847-6.380308L300.662154 0c19.140923 0 38.360615 19.140923 38.360615 38.360615 0 25.521231-19.219692 44.740923-38.360615 44.740923h-217.403077s-6.380308 0-6.380308 12.760616v204.642461c0 25.521231-12.760615 38.360615-38.360615 38.360616z"
                      fill="#5E6D82"
                      p-id="2488"
                    />
                    <path
                      d="M377.383385 415.665231c-12.760615 0-19.219692-6.380308-31.980308-12.839385L44.898462 102.4a38.912 38.912 0 0 1 0-51.121231 38.912 38.912 0 0 1 51.2 0l300.425846 300.504616a38.912 38.912 0 0 1 0 51.2c0 6.301538-12.760615 12.760615-19.140923 12.760615zM984.772923 338.944c-19.140923 0-38.360615-19.219692-38.360615-38.360615V95.940923c0-6.380308 0-6.380308-6.380308-12.760615h-217.403077c-19.140923 0-38.360615-19.219692-38.360615-38.360616 0-19.219692 19.219692-38.360615 38.360615-38.360615l211.022769 6.380308c6.380308 0 19.140923 0 31.980308 6.380307 31.980308 12.760615 51.121231 44.740923 51.121231 83.101539v204.642461c6.380308 19.140923-12.760615 31.980308-31.980308 31.980308z"
                      fill="#5E6D82"
                      p-id="2489"
                    />
                    <path
                      d="M652.288 415.665231c-12.760615 0-19.140923-6.380308-25.521231-12.839385a38.912 38.912 0 0 1 0-51.121231L927.271385 51.2a38.912 38.912 0 0 1 51.12123 0 38.912 38.912 0 0 1 0 51.2L677.888 402.747077c-6.380308 6.459077-19.219692 12.839385-25.6 12.839385zM722.628923 1023.054769c-19.140923 0-38.360615-19.219692-38.360615-38.360615 0-19.219692 19.219692-38.360615 38.360615-38.360616l211.022769-6.380307h6.380308s6.380308 0 6.380308-12.839385V722.550154c0-19.219692 19.219692-38.360615 38.360615-38.360616 19.219692 0 38.360615 19.140923 38.360615 38.360616v204.563692c0 38.360615-19.140923 63.960615-51.2 83.180308-12.681846 6.301538-25.521231 6.301538-38.281846 6.301538l-211.022769 6.459077c6.380308 0 6.380308 0 0 0z"
                      fill="#5E6D82"
                      p-id="2490"
                    />
                    <path
                      d="M952.792615 991.074462c-12.760615 0-19.140923-6.380308-25.52123-12.760616L626.766769 677.809231a38.912 38.912 0 0 1 0-51.2 38.912 38.912 0 0 1 51.121231 0l300.504615 300.504615a38.912 38.912 0 0 1 0 51.2c-6.380308 12.760615-19.140923 12.760615-25.6 12.760616zM300.662154 1023.054769H89.639385c-6.301538 0-25.521231 0-38.360616-6.380307-31.980308-12.839385-51.2-44.740923-51.2-83.101539V728.930462c0-19.140923 19.219692-38.360615 38.439385-38.360616 19.140923 0 38.360615 19.219692 38.360615 38.360616v204.642461c0 6.301538 0 6.301538 6.380308 12.760615h6.380308l211.022769 6.380308c19.140923 0 38.360615 19.219692 38.360615 38.360616 0 19.219692-19.219692 31.980308-38.360615 31.980307z"
                      fill="#5E6D82"
                      p-id="2491"
                    />
                    <path
                      d="M70.498462 991.074462c-12.839385 0-19.219692-6.380308-25.6-12.760616a38.912 38.912 0 0 1 0-51.2l300.504615-300.504615a38.912 38.912 0 0 1 51.2 0 38.912 38.912 0 0 1 0 51.2L95.940923 978.313846c0 12.760615-12.760615 12.760615-25.521231 12.760616z"
                      fill="#5E6D82"
                      p-id="2492"
                    />
                  </svg>
                  <div class="Language-Box Heraer-Show">
                    <svg
                      t="1589950506339"
                      class="Language-icon Heraer-Show"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2760"
                      width="200"
                      height="200"
                    >
                      <path
                        d="M51.2 51.2m102.4 0l716.8 0q102.4 0 102.4 102.4l0 716.8q0 102.4-102.4 102.4l-716.8 0q-102.4 0-102.4-102.4l0-716.8q0-102.4 102.4-102.4Z"
                        fill="#2E3033"
                        p-id="2761"
                      />
                      <path
                        d="M621.312 655.0528l-21.0432-55.3984H420.7616l-21.0944 56.6272c-8.192 22.0672-15.2576 36.9664-21.0944 44.6976-5.8368 7.7312-15.36 11.6224-28.6208 11.6224a41.984 41.984 0 0 1-29.7984-12.3904A37.8368 37.8368 0 0 1 307.2 672.256c0-5.9904 1.024-12.2368 3.0208-18.6368 1.9968-6.4512 5.3248-15.36 9.9328-26.8288l112.9472-286.72 11.5712-29.696a150.016 150.016 0 0 1 14.4896-28.7232c5.12-7.6288 11.8272-13.824 20.1728-18.5344 8.3456-4.7104 18.5856-7.0656 30.8736-7.0656 12.4416 0 22.8352 2.3552 31.1808 7.0656 8.2944 4.7104 15.0528 10.8032 20.1728 18.2272 5.12 7.424 9.4208 15.4112 12.9536 23.9616 3.4816 8.4992 7.936 19.9168 13.3632 34.1504l115.3536 284.928c9.0624 21.7088 13.568 37.4272 13.568 47.3088 0 10.24-4.2496 19.6096-12.8 28.16a42.0864 42.0864 0 0 1-30.8736 12.8 40.0384 40.0384 0 0 1-18.0736-3.7888 37.0176 37.0176 0 0 1-12.6464-10.24 94.208 94.208 0 0 1-11.008-19.8656 1164.8 1164.8 0 0 1-10.0864-23.6544zM444.2112 532.48h131.9424l-66.56-182.2208L444.2112 532.48z"
                        fill="#FEFEFF"
                        p-id="2762"
                      />
                    </svg>
                  </div>
                </div>
                <div class="Avatar" @click="Avatar">
                  <img src="../assets/img/f778738c-e4f8-4870-b634-56703b4acafe.gif" alt />

                  <transition name="el-zoom-in-top">
                    <div v-show="AvatarShow" class="transition-box">
                      <a @click="balack" to="#" class="ToLong">退出登录</a>
                      <router-link to="#" class="User">个人信息</router-link>
                    </div>
                  </transition>
                </div>
              </div>
            </div>

            <div class="Header-nav-botton">
          
            </div>
          </el-header>


  
        <transition name="JumpAnimation">
           <router-view class="MaIn" :key="key">
             
           </router-view>
            
   
        </transition>
       

         
        </el-main>
      </el-container>
    </el-container>
  </div>     

  </div>

  </div>
</template>

<script>
// @ is an alias to /src

//  eslint-disable-next-line no-unused-vars
import icon from "@/components/icon";
// eslint-disable-next-line no-unused-vars

import Sidebar from '@/views/SidebarCompoents/SidebarItem.vue';


export default {
  name: 'home',
  data(){
          return {
        
           dynamicSlotName:"aaa",
              user: "FooTer",
      isCollapse: true,
      value: true,
      height: "200px",
      type: "el-icon-s-fold",
      input: "",
      showSearch: false,
      AvatarShow: false,
      currentTabComponent: "HomeComponents",
      ComponentShow:true,
      percentage:0,
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
          }
  },
  components: {

      // eslint-disable-next-line vue/no-unused-components
    icon,
    // eslint-disable-next-line vue/no-unused-components
    Sidebar

  },
 
     watch: {

    // eslint-disable-next-line no-unused-vars
    '$route' (to, from) { //监听路由是否变化
      //  当路由跳转时提醒用户去登录
  
      // eslint-disable-next-line no-undef
      // if(localstorage.getitem('login')===false){
      //    this.$router.push('/')
      // }else{
      //    this.$router.push('/Home')
      // }
      // eslint-disable-next-line no-console
      console.log(this.router, this.$route.fullPath)
 

    },
            currentTabComponent(val, newval) {
        // eslint-disable-next-line no-console
        console.log(val)
        // eslint-disable-next-line no-console
        console.log(newval)
        this.ComponentShow = false
            //  this.$route.fullPath
         

      }
  },
   beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    // eslint-disable-next-line no-console
    console.log(to, from, next)
  // eslint-disable-next-line no-unused-vars
  const THIS = this
  // eslint-disable-next-line no-unused-vars
  const setIntervalDate =  setInterval(() => {
           THIS.percentage +=10
           // eslint-disable-next-line no-cond-assign
           if(THIS.percentage===100){
                clearInterval(setIntervalDate) 
                // eslint-disable-next-line no-unused-vars
                const itme = setInterval(() => {
                    THIS.percentage =0 
                    if(THIS.percentage ===0 ){
                        clearInterval(itme)
                    }
                }, 800);
           }
    }, 100);
    
    next()
  },

  
     created() {
   
     },
      computed: {
 
    key() {
      return this.$route.fullPath
    }
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    //控制菜单缩放
    swh() {
      // eslint-disable-next-line no-console
      console.log(this.$route.path);
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.type = "el-icon-s-unfold";
      } else {
        this.type = "el-icon-s-fold";
      }
    },
    SearchShow() {
      this.showSearch = !this.showSearch;
    },
    //失去焦点
    LoseFocus() {
      this.showSearch = false;
    },
    Avatar() {
      this.AvatarShow = !this.AvatarShow;
    },
    // 推出登录
    balack() {
      alert("ok");
      localStorage.setItem("login", JSON.stringify(false));
      this.$router.push("/");
    },
    customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
  }


 
  

}
</script>

<style lang="scss"  scoped >
    .home {
      width: 100%;
      height: 100%;
      
      display: flex;
      flex-direction: column;
    }
    .MaIn {
      flex: 10;
      overflow: hidden;
    }
   .FooTer {
     height: 10px;
     flex: 1;
     background-color: floralwhite;
   }
   * {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tac {
  line-height: 0;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  overflow: hidden;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.img-box {
  width: 300px;
  height: 200px;
  background-color: lawngreen;
  position: relative;
}

.Header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Header-nav-botton {
  height: 34px;
  flex: 1;
 background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid black;
}

.Header-nav-top {
  height: 34px;
  flex: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.Header-nav-let {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  line-height: 34px;
  align-items: center;
}
.Header-nav-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 40%;
  justify-content: flex-end;
  height: 30px;
}
.el-icon-s-fold,
.el-icon-s-unfold {
  font-size: 37px;
  font-weight: 300;
  height: 100%;
  background-color: #fff;
}
.default_Home {
  color: #e9eef3;
  line-height: 37px;
}
.For-the-first-time-Home {
  line-height: 37px;
  color: #b3c0d1;
}
@media screen and (max-width: 414px) {
  .Heraer-Show {
    display: none;
    overflow: hidden;
  }
}
.search-box {
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.el-icon-search {
  font-size: 30px;
}
>>> .el-input__inner {
  width: 200px;
  height: 29px;
  margin: 0px 5px;
}
.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(100px);
  opacity: 0;
}

/* 放大 */
.amplification {
  width: 25px;
  height: 25px;
  margin: 0 20px;
}
/* 语言icon */
.Language-icon {
  width: 30px;
  height: 30px;
}
.Language-Box {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
}
.Avatar {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.Avatar > img {
  width: 100%;
  height: 100%;
}
.transition-box {
  width: 100px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);

  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: -96px;
  z-index: 999;
  -webkit-transition: 0.7s all;
  transition: 0.7s all;
  margin-top: 173px;
}
.ToLong,
.User {
  width: 100%;
  height: 30px;
  font-size: 15px;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 3px;
  line-height: 30px;
  margin: 10px 0px;
  text-align: center;
  color: #fff;
}
.ToLong:hover {
  color: firebrick;
}
.User:hover {
  color: aqua;
}
.el-menu--collapse {
  width: 40px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 120px;
  min-height: 400px;
}

.JumpAnimation-enter-active {
   transition: all 1s ease;
}


 .JumpAnimation-leave-to{
  transform: translateX(10px);
  opacity: 0;
}
.JumpAnimation-leave-active ,.JumpAnimation-enter{
      opacity: 1;
      transform: translate3d(100%, 0 ,0);
    }
    //  .slide-left-enter,
    // .slide-right-leave-active {
    //   opacity: 0;
    //   transform: translate3d(-100%, 0, 0);
    // }
    .el-progress {
      width: 100%;
      height: 5px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .el-progress__text {
      height: 0px;
      width: 0px;
      display: none;
      overflow: hidden;
    }

</style>

